<template>
  <el-container>
    <el-header>
      <h1>注册新用户</h1>
    </el-header>
    <el-main>
      <el-row type="flex" justify="center">
        <el-col
          :xs="24"
          :sm="16"
          :md="12"
          :lg="8"
          :offset-md="6"
          :offset-lg="8"
        >
          <el-form class="signup-form">
            <el-form-item>
              <el-input
                v-model="form.username"
                placeholder="您的名字"
                prefix-icon="el-icon-user"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="form.email"
                placeholder="邮箱"
                prefix-icon="el-icon-message"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="form.password"
                type="password"
                placeholder="密码"
                prefix-icon="el-icon-lock"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                size="large"
                class="publish-button"
                @click="submitForm"
                >注册</el-button
              >
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script setup>
import axios from "axios";
import { ref } from "vue";
import { useRouter } from "vue-router"; // 引入 Vue Router 的 useRouter 函数
import { ElMessage } from "element-plus"; // 假设使用Element Plus版本

// 获取路由实例
const router = useRouter();

// 表单数据模型
const form = ref({
  username: "",
  email: "",
  password: "",
});

// 提交表单前，确保表单组件名和后端API一致，例如后端username，表单就不能是name
function submitForm() {
  axios
    .post("/api/users", {
      username: form.value.username,
      email: form.value.email,
      password: form.value.password,
    })
    .then((response) => {
      const token = response.data.token; // 提取令牌
      const id = response.data.id; // 提取用户id
      const username = response.data.username; // 提取用户名username

      localStorage.setItem("user-token", token); // 保存令牌到 localStorage
      localStorage.setItem("user-id", id); // 保存用户id到 localStorage
      localStorage.setItem("user-name", username); // 保存用户名到 localStorage

      ElMessage.success("注册成功！");
      // 清空表单
      form.value.username = "";
      form.value.email = "";
      form.value.password = "";
      // 注册成功后重定向到首页
      router.push("/");
    })
    .catch((error) => {
      ElMessage.error("注册失败，请检查输入或联系管理员！");
      console.error("Error registering user:", error);
    });
}
</script>

<style scoped>
/* 设置el-header样式 */
.el-header {
  background-color: white; /* 设置背景颜色 */
  color: #1d1c1c; /* 设置文字颜色 */
  height: 200px; /* 设置一个明确的高度，可以根据需要调整 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  font-size: 20px; /* 设置字体大小 */
}

/* 设置表单样式 */
.signup-form {
  /* 为了确保表单内容居中显示 */
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>